<template>
  <div class="container">
    <div id="map" />
    <div v-if="layers.length > 0" class="btn-container">
      <el-button type="primary" size="medium" @click="drawFinish">完成绘制</el-button>
    </div>
  </div>
</template>

<script type="text/javascript">
import { lmapConfig } from '@/utils/constant'
import '@geoman-io/leaflet-geoman-free'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
import { mapGetters } from 'vuex'
import * as turf from '@turf/turf'
import { getPoint } from '@/utils/map'
export default {
  data() {
    return {
      map: null,
      layers: [],
      layer: [],
      latlngs: [],
      latlngsArr: []
    }
  },
  computed: {
    ...mapGetters(['project'])
  },
  mounted() {
    // eslint-disable-next-line no-undef
    this.map = L.map('map').setView([this.project.lat, this.project.lng], this.project.maplevel)
    lmapConfig.urls.forEach((item) => {
      // eslint-disable-next-line no-undef
      L.tileLayer(item).addTo(this.map)
    })
    this.drawCircle()

    this.map.pm.addControls({
      position: 'topleft',
      drawMarker: false,
      drawCircleMarker: false,
      drawPolyline: false,
      drawCircle: false,
      drawText: false,
      editMode: false,
      dragMode: false,
      cutPolygon: false,
      rotateMode: false
    })
    this.map.pm.setPathOptions({
      color: 'blue',
      fillColor: 'pink',
      fillOpacity: 0.4
    })
    this.map.pm.setLang('zh')

    // 创建图层
    this.map.on('pm:create', (e) => {
      this.layers.push(e.layer)
      this.map.pm.disableDraw()
    })

    // 移除图层
    this.map.on('pm:remove', (e) => {
      const index = this.getLeafletId(e)
      this.layers.splice(index, 1)
    })

    this.drawMarker()
  },
  created() {
    getPoint([114.912636, 37.4682547])
    getPoint([114.913661, 37.4683995])
  },
  methods: {
    getLatLngsArr() {
      this.layers.forEach((e) => {
        const lntlngs = e._latlngs[0]
        let tmp = []
        lntlngs.forEach(item => {
          tmp.push([item.lng, item.lat].join(','))
        })
        tmp = tmp.join(';')
        this.latlngsArr.push(tmp)
      })
      console.log(this.latlngsArr)
    },
    getLeafletId(e) {
      const id = e.layer._leaflet_id
      const index = this.latlngsArr.findIndex((val) => {
        return val.id === id
      })
      return index
    },
    drawCircle() {
      // eslint-disable-next-line new-cap, no-undef
      const circle = new L.circle([this.project.lat, this.project.lng], 149.9, {
        color: '#f03', // 颜色
        fillColor: '#f03',
        fillOpacity: 0.1, // 透明度
        weight: 1
      })
      circle.addTo(this.map)
    },
    drawFinish() {
      this.getLatLngsArr()
    },
    getPoint() {
      const line_1 = turf.lineString([[114.913504, 37.467294], [114.914074, 37.4682206]])
      const line_2 = turf.lineString([[114.913945, 37.4675905], [114.912947, 37.4677651]])
      const intersects = turf.lineIntersect(line_1, line_2)
      console.log(intersects)
    },
    drawMarker() {
      // eslint-disable-next-line new-cap, no-undef
      new L.marker([37.46826417289573, 114.91262743249581]).addTo(this.map)
      // eslint-disable-next-line new-cap, no-undef
      new L.marker([37.468480335009495, 114.91367248140557]).addTo(this.map)
    }
  }
}
</script>

<style lang="scss" scoped>
  #map {
    width: 100%;
    height: 100%;
  }
  .container {
    position:relative;
    width:100%;
    height:calc(100vh - 50px);
    .btn-container{
      position:absolute;
      right:24px;
      bottom:24px;
      z-index:9999;
    }
  }
</style>
